<template>
  <div class="fliecontent">
   
    <div class="filecontent-title">
      <div class="prev">
        <span @click="routerChange(title.prev.query)"
          ><i class="el-icon-arrow-left"></i>{{ title.prev.text }}</span
        >
      </div>
      <div class="next">
        <span @click="routerChange(title.next.query)"
          >{{ title.next.text }}<i class="el-icon-arrow-right"></i
        ></span>
      </div>
    </div>
    <mavon-editor
      class="md"
      ref="mavon"
      :value="content.context"
      :subfield="prop.subfield"
      :defaultOpen="prop.defaultOpen"
      :toolbarsFlag="prop.toolbarsFlag"
      :editable="prop.editable"
      :scrollStyle="prop.scrollStyle"
    >
    </mavon-editor>
  </div>
</template>

<script>
import { httpGet, httpPost } from "@/network/request.js";
import Bus from "@/assets/js/bus.js";
import { mapState, mapMutations } from "vuex";

export default {
  name: "fliecontent",
  data() {
    return {
      title: {
        fliearr: [],
        prev: {
          path: "",
          query: "",
          text: "没有更多啦",
        },
        next: {
          path: "",
          query: "",
          text: "没有更多啦",
        },
      },
      content: {
        context: "",
        query: "",
      },
    };
  },
  mounted() {
    this.getDataarr(); 
  },
  methods: {
    getContext(path) {
      httpGet({
        url: "/getarticleinfo",
        params: {
          query: this.content.query,
        },
      })
        .then((res) => {
          this.content.context = res.data;
        })
        .catch((error) => {
          Bus.$emit("error", error);
        });
    },
    read() {
      this.$refs.mavon.toolbar_right_click("read");
    },
    getDataarr() {
      //二层循环遍历得到一个存放着各个item数据的数组
      let dataarr = JSON.parse(JSON.stringify(this.data));

      for (let i in dataarr) {
        for (let x in dataarr[i].item) {
          this.title.fliearr.push(dataarr[i].item[x]);
        }
      }
    },
    updataTitle() {
      //这里一定要加nextTick，等待getDataarr函数执行完毕再操作
      this.$nextTick(() => {
        for (let i in this.title.fliearr) {
          if (this.title.fliearr[i].query == this.content.query) {
            i = parseInt(i);
            if (i == 0) {
              this.title.prev = {
                query: "",
                path: "",
                text: "没有上一篇啦",
              };
              this.title.next = this.title.fliearr[i + 1];
            } else if (i == this.title.fliearr.length - 1) {
              this.title.prev = this.title.fliearr[i - 1];
              this.title.next = {
                query: "",
                path: "",
                text: "没有下一篇啦",
              };
            } else {
              this.title.prev = this.title.fliearr[i - 1];
              this.title.next = this.title.fliearr[i + 1];
            }
            break;
          }
        }
      });
    },
    routerChange(query) {
      if (query != "") {
        console.log(query);
        this.$router.push({
          name: "fliecontent",
          params: {
            sequence: query,
          },
        });
      }
    },
  },
  computed: {
    ...mapState({
      data: (state) => state.fliedata.file.data,
    }),
    prop() {
      let data = {
        subfield: false, // 单双栏模式
        defaultOpen: "preview", //edit： 默认展示编辑区域 ， preview： 默认展示预览区域
        editable: false,
        toolbarsFlag: false,
        scrollStyle: true,
      };
      return data;
    },
    routerParams() {
      return this.$route.params.sequence;
    },
  },
  watch: {
    routerParams: {
      deep: true,
      immediate: true,
      handler: function (newValue) {
        if (this.$route.name == "fliecontent" && newValue != "") {
          //由于转义的原因，这里再把他转义回来
          let query = newValue.replace(/[/]/g, "%2");
          this.content.query = query;
          this.getContext();
          this.updataTitle();
        }
      },
    },
  },
};
</script>

<style lang="scss">
.fliecontent {
  width: 95%;
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  min-height: 100vh;
}
.v-show-content {
  @include background-color($bgcolor-white);
}
.filecontent-title {
  padding: 8px 25px 15px 25px;
  height: 30px;
  margin-top: 20px;
  display: flex;
  @include sidenav-color($color-blackgray-light);
  font-size: 0.9rem;

  .prev {
    width: 50%;
    text-align: left;
  }

  .next {
    width: 50%;
    text-align: right;
  }

  span {
    cursor: pointer;
    padding: 5px;
    border-radius: 5px;
    transition: all 0.3s ease;
    line-height: 30px;

    i {
      font-weight: bold;
    }
  }
 
  span:hover {
    color: #409eff !important;
    @include sidenav-color-active($bgcolor-gray);
  }
}
.markdown-body h2 {
  @include markdown-h2($color-normal-light);
  @include markdown-h2-border(1px solid #dcdcdc);
}

.markdown-body {
  @include markdown-content($color-blackgray-light);
}

.markdown-body .highlight pre,
.markdown-body pre {
  @include markdown-pre($bgcolor-gray);
  padding-top: 30px !important;
  position: relative !important;
  border-radius: 10px !important;
}

.markdown-body pre::before {
  content: " ";
  display: block;
  position: absolute;
  top:10px;
  height: 20px;
  width: 40px;
  background: url('../../../assets/img/icon/state.svg') no-repeat;
  background-size: 100%;
}

.v-note-wrapper .v-note-read-model {
  @include background-color($bgcolor-white);
}

:not(:root):fullscreen {
  top: 200px !important;
}

.markdown-body img {
  border-radius: 5px !important;
  cursor: pointer !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.3s ease !important;
  width: 70% !important;
  margin-left: 15% !important;
}

.markdown-body img:hover {
  box-shadow: 0 0 0 1px rgba(53, 72, 91, 0.24), 0 3px 2px rgba(0, 0, 0, 0.14),
    0 7px 5px rgba(0, 0, 0, 0.12), 0 13px 10px rgba(0, 0, 0, 0.12),
    0 22px 17px rgba(0, 0, 0, 0.12) !important;
}

:not(:root):fullscreen::backdrop {
  position: relative !important;
}
</style>